<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生js操作</title>
    <style>
        #box {
            width: 100px;
        }

        .bgRed {
            background-color: red !important;
        }
    </style>
</head>

<body>
    <div id="box"></div>
</body>

<script>
    // 创建a标签
    const boxEle = document.querySelector('#box')
    const linkEle = document.createElement('a')
    linkEle.innerText = '一个链接'
    linkEle.setAttribute('href', 'https://www.baidu.com')
    linkEle.setAttribute('target', '_blank')
    boxEle.appendChild(linkEle)
    const brEle = document.createElement('br')
    boxEle.appendChild(brEle)
    // 创建文本节点
    const textNode = document.createTextNode('你好呀')
    boxEle.appendChild(textNode)
    console.log('---------------------')

    // 子节点 子元素
    console.log(boxEle.childNodes)
    console.log(boxEle.children)
    // 父节点 父元素
    console.log(textNode.parentNode)
    console.log(textNode.parentElement)
    console.log('---------------------')

    // 相邻节点 相邻元素
    console.log(textNode.previousSibling)
    console.log(linkEle.nextSibling)
    console.log(textNode.previousElementSibling)
    console.log(linkEle.nextElementSibling)

    // 在指定位置插入节点
    const textNode2 = document.createTextNode('你好呀222')
    boxEle.insertBefore(textNode2, linkEle)
    // 替换节点
    const hrEle = document.createElement('hr')
    boxEle.replaceChild(hrEle, brEle)
    console.log('---------------------')

    // 添加class类名
    console.log(boxEle.className)
    boxEle.className = 'bgRed active' // 会覆盖之前的class
    // class类名数组
    console.log(boxEle.classList)
    boxEle.classList.add('class2')
    boxEle.classList.remove('active')
    console.log('---------------------')

    // 设置属性
    boxEle.setAttribute('style', 'background-color: yellow;font-size: 12px') // 注意是行内样式
    console.log(boxEle.getAttribute('class'))
    console.log(boxEle.hasAttribute('style'))
    // 自定义属性
    boxEle.dataset.self = '1'

    // 设置样式
    console.log(boxEle.style.fontSize)
    boxEle.style.textAlign = 'center' // 注意是行内样式
    console.log('---------------------')

    // 监听事件
    // 1. 这种事件会叠加
    boxEle.addEventListener('click', function () {
        console.log(1111)
        console.log(this) // 指向boxEle
    })
    boxEle.addEventListener('click', function () {
        console.log(2222)
    })
    const listener3 = function () {
        console.log(3333)
    }
    boxEle.addEventListener('click', listener3, true) // 第三个参数true表示捕获 false表示冒泡
    boxEle.removeEventListener('click', listener3, true)

    // 2. 这种事件会覆盖之前的
    boxEle.onclick = function () {
        console.log(4444)
    }
    boxEle.onclick = function () {
        console.log(5555)
    }
    console.log('---------------------')

    // 获取元素相关计算后的值
    if (window.getComputedStyle) {
        console.log(1)
        console.log(window.getComputedStyle(boxEle, null)['height']) // getComputedStyle两个参数 元素和伪类
    } else {
        console.log(2)
        console.log(boxEle.currentStyle['height'])
    }

</script>

</html>